<template>
  <div class="flow-design" >
    <a-slider v-model="percent" :max="1" :step="0.1" :style="{width: '150px'}" />
    <div>
      <ProcessRender @changeSelectedNode="changeSelectedNode" :style="{ transform: `scale(${percent})`}"></ProcessRender>
    </div>

    <a-drawer :width="340" :visible="visible" @ok="visible=false" @cancel="visible=false" unmountOnClose>
    <template #title>
      我是节点信息
    </template>
    <div>
      {{ 
      JSON.stringify(curNode)
         }}
    </div>
  </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
import ProcessRender from '@/components/common/x-flow/ProcessRender.vue';
import type { transform } from 'lodash';
import type BaseFlowNode from '@/components/common/x-flow/class/BaseFlowNode';
let percent = ref(1)



let visible = ref(false);
let curNode=ref<BaseFlowNode>()
//监听当前选中节点得变化
function changeSelectedNode(node:BaseFlowNode){
  curNode.value=node
  node?visible.value=true:visible.value=false
}

</script>
<style scoped lang="scss">
.flow-design{
  width: 100%;
  height: 100%;

  overflow: auto;
    background-color: #F5F5F5;
  
    box-sizing: border-box;
}
</style>